<html>
<head>
    <title>Northwind CRUD</title>
    <style>
        body { padding: 3em; }
        body, input[type=text] { font: 32px/42px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif }
        input { padding:.25em .5em; margin-right:.5em; }
        #info { font-size: 20px; line-height: 26px; }
        a { color: #007bff }
        #result { display:inline-block;color:#28a745; }
        th, td { padding-right: 1em; vertical-align:top; }
        th { text-align: left; }
        pre { border: 1px solid #ccc; padding: .25em .5em; width: 50%; min-width: 750px; color: #444; }
        pre.sh { background: #f1f1f1; }
        pre.comment { color: green; }
        pre.sh::before { content: "$ " }
        .muted { color: #999; }
        ul, li { margin: 0; padding: 0; }
        ul { list-style:none; }
    </style>
    <script type="importmap">
    {
        "imports": {
            "@servicestack/client": "./js/servicestack-client.mjs"
        }
    }
    </script>
</head>
<body>

    <div id="info">

        <h1><a href="/ui">/ui</a></h1>
        <h1><a href="/locode">/locode</a></h1>
        <h1><a href="/admin-ui">/admin-ui</a></h1>
        <h1><a href="/chat">/chat</a></h1>

        <h2>AutoCrud Generation Links</h2>
        <table>
            <tr>
                <th>RDBMS Schema</th>
                <td>
                    <a href="/crud/tables">/crud/tables</a>
                </td>
            </tr>
            <tr>
                <th>New Auto Generated Services (C#)</th>
                <td>
                    <a href="/crud/new/csharp">/crud/new/csharp</a>
                </td>
            </tr>
            <tr>
                <th>All Services (C#)</th>
                <td>
                    <a href="/crud/all/csharp">/crud/all/csharp</a>
                </td>
            </tr>
            <tr>
                <th>Generate DTOs in alt languages (e.g. TypeScript)</th>
                <td>
                    <ul>
                        <li><a href="/crud/all/typescript">/crud/all/typescript</a></li>
                        <li><a href="/crud/all/dart">/crud/all/dart</a></li>
                        <li><a href="/crud/all/java">/crud/all/java</a></li>
                        <li><a href="/crud/all/kotlin">/crud/all/kotlin</a></li>
                        <li><a href="/crud/all/swift">/crud/all/swift</a></li>
                        <li><a href="/crud/all/vbnet">/crud/all/vbnet</a></li>
                        <li><a href="/crud/all/fsharp">/crud/all/fsharp</a></li>
                    </ul>
                </td>
            </tr>
            <tfoot>
            <tr>
                <td colspan="2" class="muted" style="padding:.5em 0 0 0">
                    * requires <a href="https://docs.servicestack.net/debugging#debugmode">DebugMode</a> or Admin role
                    (e.g. <a href="https://docs.servicestack.net/debugging#authsecret">?authsecret=zsecret</a>)
                </td>
            </tr>
            </tfoot>
        </table>

        <h3>Eject into code-first models</h3>
        <p>
            Use dotnet tool to generate Types for Tables where AutoQuery Services don't already exist:
        </p>
        
        <pre class="sh">x csharp https://localhost:5001 -path /crud/new/csharp</pre>
        
        <div>
            If RDBMS Schema changes, can update dtos as normal:
        </div>
        <pre class="sh">x csharp</pre>

    </div>

    <h2 style="margin-top:2em; border-top: 1px solid #eee; padding-top:.5em">
        <a href="/json/metadata?op=Hello">Hello</a> API
    </h2>
    <input type="text" id="txtName" placeholder="Name" onkeyup="callHello(this.value)">
    <div id="result"></div>
    
    <h3>Example Code</h3>
    <div style="font-size:20px;line-height:26px">
        <pre>&lt;script type="importmap"&gt;
{
    "imports": {
        "@servicestack/client": "./js/servicestack-client.mjs"
    }
}
&lt;/script&gt;</pre>
        <pre class="csharp">import { JsonServiceClient } from "@servicestack/client"
import { Hello } from "./dtos.mjs"

const client = new JsonServiceClient()
const api = await client.api(new Hello({ name }))
if (api.succeeded) {
    console.log(api.response.result)
}
</pre>
        
        <p>
            Generate Typed DTOs from 
            <a href="https://docs.servicestack.net/typescript-add-servicestack-reference">Add ServiceStack Reference</a> 
        </p>
    </div>

<script type="module">
import { $1, JsonServiceClient } from "@servicestack/client"
import { Hello } from "./mjs/dtos.mjs"

const client = new JsonServiceClient()

globalThis.callHello = async function (val) {
    const api = await client.api(new Hello({ name: val }))
    if (api.succeeded) {
        $1('#result').innerHTML = api.response.result;
    }
}
</script>

</body>
</html>